
<template>
<div>
 <button @click="change">按钮</button>
      {{obj.age}}
      {{state}}
</div>
</template>

<script setup lang="ts">
import {reactive, toRef,toRefs,toRaw} from 'vue'
// 1.toRef:如果原始对象是非响应式的就不会更新视图 数据是会变的
// const obj = {
//   age:18,
//   name:"邓紫棋"
// }
// const state =toRef(obj,"age")
// const change =()=>{
//   state.value++; 
//   console.log(state) // 控制台变化但是页面不变
// }
//总结:如果原始对象是响应式的是会更新视图并且改变数据的

// 2.toRefs:可以帮我们批量创建ref对象主要是方便我们解构使用
// const obj =reactive({
//  age:18,
//  name:"邓紫棋"
// })
// let {age,name} = toRefs(obj)
// const change =()=>{
// age.value++;
// }
// console.log(obj)

// toRaw:将响应式对象转化为普通对象
const obj =reactive({
 age:18,
 name:"邓紫棋"
})
const state = toRaw(obj)
const change = () =>{
  console.log(state)
}
</script>


<style>

</style>
